<div class="object-row" data-prop-name="<%= fieldName %>" data-prop-type="<%= fieldType %>">
    <div class="form-inline simple-row">
        <div class="property-info">
                    <span class="field-name col-form-label col-form-label-sm">
                        <button id="<%= IDs.expanderButtonId %>" class="expander-btn btn btn-sm btn-outline-secondary mr-1"
                                data-expanded="true">
                            <i class="fas fa-chevron-down"></i>
                        </button>
                        <span class="field-name-text"><%= fieldName %></span>
                    </span>
            <span class="field-type col-form-label col-form-label-sm"> <%= fieldType %> </span>
        </div>
        <div class="remove-btn-block">
            <button id="<%= IDs.removeButtonId %>" class="remove-btn btn btn-sm btn-outline-danger mr-2">
                <i class="fas fa-trash-alt"></i>
            </button>
        </div>
    </div>
    <div class="new-prop-container" id="<%= IDs.newPropContainerId %>">
        <div class="properties" id="<%= IDs.propertiesId %>">
            <!-- properties will be added dynamically -->
        </div>

        <div class="new-prop-block" id="<%= IDs.newPropBlockId %>" style="display: block;">
            <button class="btn btn-sm btn-outline-info new-prop-btn">
                <i class="fas fa-plus"></i>
            </button>
        </div>
        <div class="form-inline new-field-elements" id="<%= IDs.newFieldElementsId %>" style="display: none;">
            <label for="field-name-input" class="col-form-label col-form-label-sm mr-2">Name:</label>
            <input id="<%= IDs.fieldNameInputId %>" type="text" name="field-name-input" placeholder="placeholder"
                   class="form-control form-control-sm w-auto mr-3">
            <label for="field-type-selection" class="col-form-label col-form-label-sm mr-2">Type:</label>
            <select name="field-type-selection" id="<%= IDs.fieldTypeSelectionId %>" class="custom-select custom-select-sm w-auto mr-3">
                <option value="string" selected>string</option>
                <option value="number">number</option>
                <option value="integer">integer</option>
                <option value="boolean">boolean</option>
                <option value="array">array</option>
                <option value="object">object</option>
            </select>
            <button id="<%= IDs.addButtonId %>" class="add-btn btn btn-sm btn-outline-success mr-3" disabled="true">
                <i class="fas fa-check-circle"></i>
            </button>
            <button id="<%= IDs.cancelButtonId %>" class="btn btn-sm btn-outline-warning cancel-btn">
                <i class="fas fa-times-circle"></i>
            </button>
        </div>
    </div>
</div>